display: grid
まとめて指定できるやつ
列数、行数、サイズを指定する
AAっぽく指定できてわかりやすい
code:css
.ComplexGrid {
display: grid;
/* エリア名の文字数が合わないときは、スペースを入れて各列のおしりを揃えると見やすい */
grid-template:
'Alpha Beta Beta' 80px
'Alpha . Gamma' 80px
'Alpha Delta Gamma' auto /
40% 80px 1fr;
gap: 4px;
}
個別に設定する
幅/高さ未指定の子要素の合計幅/高さをfrの合計で割ったもの
図解が丁寧